import React, { Component } from "react";
import "../assets/css/MyOrder.css";
import PageHeader from "../components/PageHeader";
import login from "../hooks/loginInfo";
import Bg from "../components/Bg";
import OrderCard from "../components/OrderCard";
import Loading from "../components/Loading";

class MyOrder extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: "",
      orderList: null,
      currentIndex: 0,
      currentList: null,
    };
    this.affirmGoods = this.affirmGoods.bind(this);
    this.successGoods = this.successGoods.bind(this);
  }

  affirmGoods(oid) {
    var list = this.state.orderList;
    list[0].forEach((item, index) => {
      if (item.oid === oid) {
        list[0][index]["status"] = 2;
      }
    });
    list[1].forEach((item, index) => {
      if (item.oid === oid) {
        list[1][index]["status"] = 2;
        list[2].push({
          ...list[1][index],
          createTime: list[1][index]["children"][0]["createdAt"],
        });
        list[1].splice(index, 1);
      }
    });
    this.setState({
      orderList: list,
      currentList: list[this.state.currentIndex],
    });
  }

  successGoods(oid) {
    var list = this.state.orderList;
    list[0] = list[0].filter((item) => {
      return item.oid !== oid;
    });
    list[2] = list[2].filter((item) => {
      return item.oid !== oid;
    });
    this.setState({
      orderList: list,
      currentList: list[this.state.currentIndex],
    });
  }

  componentWillMount() {
    var loginInfo = login();
    this.setState({
      token: loginInfo.token,
    });

    this.$axios
      .get("/findOrder", {
        params: {
          tokenString: loginInfo.token,
          status: 0,
        },
      })
      .then((res) => {
        var oids = [res.data.result, [], []];
        res.data.result.forEach((item) => {
          if (item.status === 1) {
            oids[1].push(item);
          } else if (item.status === 2) {
            oids[2].push(item);
          }
        });
        oids.forEach((item, index) => {
          var o = [];
          item.forEach((it) => {
            if (o.length === 0) {
              o.push({
                oid: it.oid,
                status: it.status,
                createTime: it.createdAt,
                children: [it],
              });
            } else {
              var index = o.findIndex((i) => {
                return i.oid === it.oid;
              });
              if (index === -1) {
                o.push({
                  oid: it.oid,
                  status: it.status,
                  createTime: it.createdAt,
                  children: [it],
                });
              } else {
                o[index]["children"].push(it);
              }
            }
          });
          oids[index] = o;
        });
        this.setState({
          orderList: oids,
          currentList: oids[0],
        });
      });
  }

  render() {
    return (
      <div className="MyOrder">
        <PageHeader>
          <span slot="title">我的订单</span>
        </PageHeader>
        {this.state.orderList ? (
          <React.Fragment>
            {this.state.orderList ? (
              <Bg>
                <div className="order_header">
                  <div
                    className={this.state.currentIndex === 0 ? "active" : ""}
                    onClick={() =>
                      this.setState({
                        currentIndex: 0,
                        currentList: this.state.orderList[0],
                      })
                    }
                  >
                    <span>全部</span>
                  </div>
                  <div
                    className={this.state.currentIndex === 1 ? "active" : ""}
                    onClick={() =>
                      this.setState({
                        currentIndex: 1,
                        currentList: this.state.orderList[1],
                      })
                    }
                  >
                    <span>进行中</span>
                  </div>
                  <div
                    className={this.state.currentIndex === 2 ? "active" : ""}
                    onClick={() =>
                      this.setState({
                        currentIndex: 2,
                        currentList: this.state.orderList[2],
                      })
                    }
                  >
                    <span>已完成</span>
                  </div>
                  <span
                    style={{ left: `${this.state.currentIndex * 112 + 35}px` }}
                    className="slider"
                  ></span>
                </div>
                <div className="order_list">
                  {this.state.currentList.map((item) => {
                    return (
                      <OrderCard
                        affirmGoods={this.affirmGoods}
                        successGoods={this.successGoods}
                        key={item.oid}
                        order={item}
                      ></OrderCard>
                    );
                  })}
                  {this.state.currentList.length === 0 && (
                    <div>
                      <div className="cart_none">
                        <div className="cart_none_empty">
                          <img
                            src={require("../assets/images/empty.png").default}
                            alt=""
                          />
                          <span>暂无相关订单，去逛一逛吧！</span>
                        </div>
                        <button
                          className="cart_none_btn"
                          onClick={() => this.props.history.push("/")}
                        >
                          逛一逛
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </Bg>
            ) : (
              <div className="cart_none">
                <div className="cart_none_empty">
                  <img
                    src={require("../assets/images/empty.png").default}
                    alt=""
                  />
                  <span>暂无订单消息，去逛一逛吧！</span>
                </div>
                <button
                  className="cart_none_btn"
                  onClick={() => this.props.history.push("/")}
                >
                  逛一逛
                </button>
              </div>
            )}
          </React.Fragment>
        ) : (
          <Loading></Loading>
        )}
      </div>
    );
  }
}

export default MyOrder;
